@import url('../../base/base.min.css');
@function rem($size) {
    @return ($size/108)*1rem;
}

body {
    background-color: #9624CC;
}

.header {
    width: 100%;
    position: relative;
    img {
        width: 100%;
    }
    &-top {
        position: absolute;
        width: 100%;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: rem(119);
    }
}

.wrap {
    margin: 0 auto;
    width: rem(1002);
    &-title1 {
        margin: rem(60) auto rem(10);
        width: rem(388);
        height: rem(60);
        text-align: center;
        line-height: rem(60);
        border-radius: rem(60);
        color: #F9E5B2;
        border: 2px solid #FFD097;
        font-size: rem(28);
        font-weight: bold;
    }
    &-nav {
        width: 100%;
        height: rem(68);
        border-radius: rem(68);
        background-color: #6B12FF;
        color: white;
        margin: rem(30) 0;
        font-size: rem(26);
        display: flex;
        cursor: pointer;
        &-left,
        &-right {
            width: 50%;
            margin: 0 rem(40);
            text-align: center;
            line-height: rem(68);
            font-weight: bold;
            &.cur {
                background-color: white;
                color: #3C08DC;
                border-radius: rem(68);
                transform: scale(1.1);
            }
        }
    }
}

.container {
    width: 100%;
    .card {
        position: relative;
        height: rem(452);
        width: 32.3%;
        margin: rem(10) rem(5) 0;
        background-color: white;
        color: #E6CDAE;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        // &::before{
        //     content: '预售';
        //     position: absolute;
        //     top: 0;
        //     right: rem(10);
        //     width: rem(50);
        //     height: rem(50);
        //     text-align: center;
        //     line-height: rem(50);
        //     font-size: rem(20);
        //     color: white;
        //     background-color: #FF002A;
        // }
        // &::after{
        //     content: '';
        //     position: absolute;
        //     top: rem(50);
        //     right: rem(10);
        //     width: 0;
        //     height: 0;
        //     border-style: solid;
        //     border-color: #FF002A;
        //     border-left-width: rem(25);
        //     border-bottom-width: rem(8);
        //     border-bottom-color: transparent;
        //     border-right-width: rem(25);
        // }

        &-pic {
            width: 100%;
            height: 72%;
        }
        &-bar {
            flex: 1;
            width: 100%;
            box-sizing: border-box;
            padding: rem(12) rem(16);
            font-size: rem(18);
            background-color: #140B10;
        
            &-h {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical; // line-height: rem(26);
            }
            &-old {
                font-size: rem(16); // line-height: rem(38);
                padding-top: rem(14);
            }
            &-new {
                font-size: rem(20);
                padding-top: rem(26);
                i {
                    font-style: normal;
                    font-size: rem(32);
                    font-weight: bold;
                }
            }
            &-now {
                display: block;
                width: rem(100);
                height: rem(26);
                border-radius: rem(26);
                background-color: #E6CDAE;
                color: #140B10;
                text-align: center;
                line-height: rem(26);
                margin-top: rem(4);
                font-size: rem(14);
            }
        }
    }
}

footer {
    .back-top {
        width: rem(260);
        height: rem(66);
        border: 2px solid white;
        font-size: rem(30);
        font-weight: bold;
        margin: rem(70) auto;
        line-height: rem(66);
        color: white;
        text-align: center;
        border-radius: rem(66);
        cursor: pointer;
    }
}
/* 公有 左侧导航条 */
.left-Nav-fixed{
    display: none;
    width: 100px;
    background:#101720;
    z-index: 10000;
    left:0;
    top:8%;
    position: fixed;
    padding-bottom: 100px;
  }
  .parallel-main{
      height: 100px;
  }
  .left-Nav-fixed img{
    width: 100%;
  }
  .parallel-point{
    box-sizing: border-box;
    height: 80px;
    padding:0 6.8%;
    margin-bottom:16px;
  }
  .s-backtop img{width:40px;display: block;margin: 70px auto 0;cursor: pointer;}
  .block{display:block;width:100%;height:100%}
  /* 公有 左侧导航条 */

// 媒体查询
@media screen and (max-width: 810px) {
    // .header-top{
    //     height: rem();
    // }
    .wrap {
        width: 98%;
    }
    .container .card {
        width: 49%;
        height: rem(720);
        &-bar {
            font-size: rem(34);
            &-h {
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            &-old {
                font-size: rem(30);
                line-height: rem(68);
            }
            &-new {
                font-size: rem(32);
                padding-top: rem(60);
                i {
                    font-size: rem(48);
                }
            }
            &-now {
                width: rem(200);
                height: rem(46);
                line-height: rem(46);
                border-radius: rem(26);
                // margin-top: rem(4);
                font-size: rem(26);
            }
        }
    }
}

@media screen and (min-width:960px) {
    .header {
        img{
            display: none;
        }
        height: rem(169*4);
        background: url('../img/banner-pc_01.jpg')no-repeat center 0, url('../img/banner-pc_02.jpg')no-repeat center rem(169), url('../img/banner-pc_03.jpg')no-repeat center rem(169*2), url('../img/banner-pc_04.jpg')no-repeat center rem((169*3)-1);
        &-top {
            height: rem(119);
            background: url('../img/top-pc.png')no-repeat center/cover;
        }
    }
    .left-Nav-fixed{
        display: block;
    }
}